<template>
  <div class="fx-col" :class="colClass" :style="colStyle">
    <slot></slot>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, inject, PropType, Ref } from 'vue'

interface ColProps {
  span: number;
  offset: number;
}

export default defineComponent({
  name: 'fxCol',
  props: {
    span: {
      type: Number as PropType<number>,
      default: 24,
      validator (val: number): boolean {
        return val > 0 && val <= 24 && Number.isInteger(val)
      }
    },
    offset: {
      type: Number as PropType<number>,
      default: null,
      validator (val: number): boolean {
        return val > 0 && val <= 24 && Number.isInteger(val)
      }
    }
  },
  setup (props: ColProps) {
    // 栅格间隔
    const rowGutter = inject<Ref<number> | null>('rowGutter', null)
    // 根据传入参数 设置类名
    const colClass = computed(() => {
      const className = []
      if (props.span) className.push(`fx-col-${props.span}`)
      if (props.offset) className.push(`fx-col-offset-${props.offset}`)
      return className
    })
    // 根据间隔距离返回对应padding值
    const colStyle = computed(() => {
      if (!rowGutter?.value) return null
      return {
        'padding-right': `${rowGutter.value}px`
      }
    })

    return {
      rowGutter,
      colStyle,
      colClass
    }
  }
})
</script>
